<template>
  <div class="center">
    <div class="data">
      <div>
        <h1>今日生成计划达成</h1>
        <div class="btn">
          <div class="btn1">
            <div class="yuan1"></div>
            <span>计划</span>
          </div>
          <div class="btn2">
            <div class="yuan2"></div>
            <span>接近</span>
          </div>
          <div class="btn3">
            <div class="yuan3"></div>
            <span>超值</span>
          </div>
          <div class="btn4">
            <div class="yuan4"></div>
            <span>差值</span>
          </div>
        </div>
      </div>
      <div id="jinrishengchanjihuadacheng_main"></div>
    </div>
  </div>
</template>
        <script>
import * as echarts from "echarts";

export default {
  name: "jinrishengchanjihuadacheng",
  data() {
    return {
      showdata: true,
      showbtn: false,
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      let chartDom = document.getElementById("jinrishengchanjihuadacheng_main");
      let myChart = echarts.init(chartDom);
      let option;

      let biaozhunzhi = 230;
      let maxIndex = biaozhunzhi;
      let minIndex = 205;

      let e5Data = {
        lastVal: [101, 123, 210, 334, 390],
        stationName: ["焊装上线", "入彩库", "总装上线", "入成品库", "发车"],
        breakevenEle: [160, 30, 242, 140, 300],
      };

      option = {
        // tooltip: {
        //   trigger: "axis",
        //   axisPointer: {
        //     type: "shadow",
        //   },
        // },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: e5Data.stationName,
            axisLine: {
              //这是x轴文字颜色
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              textStyle: {
                fontSize: 16,
                fontWeight: "bold",
              },
            },
          },
          /*隐藏一个不显示的横坐标，用作横线的位置*/
          {
            type: "category",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            data: e5Data.stationName,
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              //分割线配置
              show: true,
              lineStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(72, 128, 255, 0.5)",
                    },
                    {
                      offset: 1,
                      color: "rgba(72, 128, 255, 0)",
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
          },
        ],
        series: [
          {
            name: "数量",
            type: "bar",
            barWidth: 35,
            itemStyle: {
              normal: {
                color: function (params) {
                  let colors = [];
                  if (params.data > maxIndex) {
                    colors = ["#45d8b7", "#23705c"];
                  } else if (params.data < maxIndex && params.data > minIndex) {
                    colors = ["#0194ff", "#004a82"];
                  } else {
                    colors = ["#f2b304", "#8a6500"];
                  }
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: colors[0] },
                    { offset: 1, color: colors[1] },
                  ]);
                },
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    fontSize: 18,
                    color: "#FFF",
                  },
                },
              },
            },
            data: e5Data.lastVal,
          },
          {
            stack:
              "breakevenEleGroup" /*数据组，需要设置才能将两个bar堆积在一起*/,
            type: "bar",
            barMaxWidth: 35,
            xAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)" /*设置bar为隐藏，撑起下面横线*/,
                label: {
                  show: false, //开启显示
                  position: "top", //在上方显示
                  distance:function(params){
                    console.log('params==========>',params)
                  },
                  textStyle: {
                    //数值样式
                    color: "#FFF",
                    fontSize: 18,
                  },
                },
              },
            },
            data: e5Data.breakevenEle,
          },
          {
            /* 这个bar是横线的显示*/
            stack: "breakevenEleGroup",
            type: "bar",
            barMaxWidth: 40,
            xAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "rgba(255,255,255,1)",
              },
            },
            data: [4, 4, 4, 4, 4],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
        <style  scoped>
.center {
  width: 100%;
  height: 100%;
}
.data {
  width: 100%;
  background-color: rgb(1, 1, 3);
}
#jinrishengchanjihuadacheng_main {
  height: 440px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(
    circle at 50% 150%,
    rgba(22, 64, 162, 0.7),
    rgb(1, 1, 3)
  );
}

.data h1 {
  text-align: center;
}
.data .btn {
  height: 3.125rem /* 50/16 */;
  text-align: center;
  display: flex; /*重要*/
  margin-left: 32%;
}
.data .btn .btn1 {
  display: flex; /*重要*/
  margin-left: 0.3125rem /* 5/16 */;
}

.data .btn .btn1 span {
  margin-left: 8px;
}
.data .btn .btn2 {
  padding-left: 0.625rem /* 10/16 */;
  display: flex; /*重要*/
  margin-left: 0.3125rem /* 5/16 */;
}
.data .btn .btn2 span {
  margin-left: 8px;
}
.data .btn .btn3 {
  padding-left: 0.625rem /* 10/16 */;
  display: flex; /*重要*/
  margin-left: 0.3125rem /* 5/16 */;
}
.data .btn .btn3 span {
  margin-left: 8px;
}
.data .btn .btn4 {
  padding-left: 0.625rem /* 10/16 */;
  display: flex; /*重要*/
  margin-left: 0.3125rem /* 5/16 */;
}
.data .btn .btn4 span {
  margin-left: 8px;
}
.yuan1 {
  background: #ffffff;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}
.yuan2 {
  background: #0191ff;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}
.yuan3 {
  background: #44d7b6;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}
.yuan4 {
  background: #f7b501;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}
</style>
        